<!--图片存在水印-->
<template>
  <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
    <div class="tips">点击移除带水印的图片</div>
    <div class="d-flex flex-wrap" style="max-height: 200px; overflow: auto; margin-top: 5px;">
      <template v-if="info.houImageVO.length">
        <div v-for="item in info.houImageVO" :key="item.fileId">
          <ImgItem :item="item">
            <el-button round size="mini" type="danger" style="margin-top: 6px" @click="handleRemove(item)"
              >移除</el-button
            >
          </ImgItem>
        </div>
      </template>
      <template v-else><div style="width: 100%" class="text-center">暂无数据</div></template>
    </div>
    <div class="tips">点击添加可以将VR图片补充至室内图，替代被删除的带水印图片</div>
    <div class="d-flex flex-wrap text-center" style="max-height: 200px; overflow: auto; margin-top: 5px;">
      <template v-if="optionsList.length">
        <div v-for="item in optionsList" :key="item.fileId">
          <ImgItem :item="item">
            <el-button round size="mini" type="primary" style="margin-top: 6px" @click="handleAdd(item)"
              >添加</el-button
            >
          </ImgItem>
        </div>
      </template>
      <template v-else><div style="width: 100%" class="text-center">暂无数据</div></template>
    </div>

    <div class="tips" style="margin-top: 10px">点击上传图片可以手工上传图片</div>

    <!-- 室内图片的上传 -->
    <ButtonUpdateImg :row="updateImgConfig"></ButtonUpdateImg>

    <!-- <button @click="handleSave">保存</button> -->
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import ImgItem from "./com/ImgItem";
import ButtonUpdateImg from "./com/ButtonUpdateImg";
import { getFrontAndbackVrData, getHouseInfo, vrPicCut } from "@/api/user";
import { houseImages } from "@/config/house/houseDetailConfig";
export default {
  name: "ComImgWaterMark",
  components: {
    ImgItem,
    ButtonUpdateImg,
  },
  data() {
    // 上边可选的图片的fileId列表
    this.immobileList = [];
    // 属于这个房源 但不属于本次操作主题的图片（如本次在补充室内图，则该值为其它的非室内图集合）
    this.otherList = [];
    // 已操作的缓存映射
    this.cacheObj = {};
    return {
      loading: false,
      visible: true,
      optionsList: [],
      updateImgConfig: houseImages.find((v) => v.title == "室内照片"),
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  watch: {},
  computed: {
    ...mapState({
      info: (state) => state.houseInfo,
    }),
    ...mapGetters({
      houDelId: "houseInfo/houDelId",
    }),
  },
  methods: {
    ...mapMutations({
      ADD_IMG: "houseInfo/ADD_IMG",
      REMOVE_IMG: "houseInfo/REMOVE_IMG",
    }),
    init() {
      this.initOptionsData();
    },

    // 待选项
    async initOptionsData() {
      const param = { delId: this.houDelId };

      // 补充室内图时
      this.optionsList = await this.fetchOptionsList(getFrontAndbackVrData, param, (item) => {
        return {
          cover: "0",
          fileId: item.thumburl, //接口变动——getFrontAndbackVrData不再返回fileId，直接使用thumburl字段来代替数据的唯一标志
          houDelId: this.houDelId,
          id: "",
          tagCode: "",
          tagName: "未选择",
          type: "pic",
          url: item.thumburl,
        };
      });

      this.immobileList = this.optionsList.map((v) => v.fileId);
    },

    async fetchOptionsList(fetchApi, param, handler) {
      const { content = [], isSuccess } = await fetchApi(param);
      if (!isSuccess) {
        return Promise.reject();
      }
      return Promise.resolve(
        content
          .filter((v) => !!v)
          .map(handler)
          .filter((item) => {
            return !this.info.houImageVO.find((v) => item.fileId == v.fileId);
          }),
      );
    },

    async handleAdd(item) {
      let i = this.optionsList.findIndex((v) => item.fileId == v.fileId);

      // 非户型图即室内图
      this.loading = true;
      const { content, isSuccess } = await vrPicCut({ url: item.fileId });
      this.loading = false;
      if (isSuccess && content && content.fileId) {
        let target = this.optionsList.splice(i, 1)[0];
        this.cacheObj[content.fileId] = target;

        this.ADD_IMG({
          cover: "0",
          fileId: content.fileId,
          houDelId: this.houDelId,
          id: "",
          tagCode: "",
          tagName: "未选择",
          type: "pic",
          url: content.url,
        });
      } else {
        this.$message.error("添加失败！");
      }
    },
    handleRemove(item) {
      const { houImageVO } = this.info;
      let target = houImageVO.find((v) => v.fileId == item.fileId)
      if (target) {
        this.REMOVE_IMG(item.fileId)
        
        let cache = this.cacheObj[target.fileId];
        if (cache) {
          target = cache;
          delete this.cacheObj[target.fileId];
        }
  
        if (this.immobileList.includes(target.fileId)) {
          this.optionsList.push(target);
        }
      }
    },
    handleSave() {},
  },
  beforeDestroy() {
    this.otherList = null;
    this.immobileList = null;
    this.cacheObj = null;
  },
};
</script>
<style scoped>
.tips {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 3;
}
</style>
